import * as React from 'react';
import {Form, Table} from 'antd';
import {ColumnProps} from 'antd/lib/table';
import {withWrapper} from '../../components/basic';
import * as moment from 'moment';
import {Type, Status, Level} from '../../enum/user';

const renderTime = (text: string) => text ? moment(text).format('YYYY-MM-DD HH:mm:ss') : '';


class WrapperTable extends React.Component<any> {
    public columns: Array<ColumnProps<Table.Data>> = [{
        title: 'ID',
        dataIndex: 'id',
        key: 'id',
        width: 100,
        fixed: 'left',
    }, {
        title: '用户名',
        dataIndex: 'username',
        key: 'username',
        width: 150,
        fixed: 'left',
    }, {
        title: '昵称',
        dataIndex: 'nick_name',
        width: 200,
        key: 'nick_name',
    }, {
        title: '头像',
        dataIndex: 'avatar',
        width: 85,
        key: 'avatar',
        render: (src: string) => (
            <div style={{height: 50}}>
                <img src={src} style={{width: 50, height: 50}} alt=""/>
            </div>
        ),
    }, {
        title: '电话号码',
        dataIndex: 'phone',
        width: 160,
        key: 'phone',
    }, {
        title: '邮箱',
        dataIndex: 'email',
        width: 250,
        key: 'email',
    }, {
        title: '软妹币',
        dataIndex: 'coin',
        width: 100,
        key: 'coin',
    }, {
        title: '级别',
        dataIndex: 'level',
        width: 80,
        key: 'level',
        render: (text: string) => text ? Level[text] : ''
    }, {
        title: '工作',
        width: 200,
        dataIndex: 'jobs',
        key: 'jobs',
    }, {
        title: '用户状态',
        width: 100,
        dataIndex: 'status',
        key: 'status',
        render: (text: string) => {
            const t = text ? Status[text] : ''

            if (t === '正常') {
                return <span style={{color: '#0bd158'}}>{t}</span>
            }
            return <span style={{color: '#f93343'}}>{t}</span>

        }
    }, {
        title: '用户类型',
        width: 150,
        dataIndex: 'type',
        key: 'type',
        render: (text: string) => text ? Type[text] : ''
    }, {
        title: '第三方账户ID',
        width: 150,
        dataIndex: 't_third_id',
        key: 't_third_id',
    }, {
        title: '第三方账户厂家',
        width: 150,
        dataIndex: 't_provider',
        key: 't_provider',
        render: (text: string) => <span style={{color: '#e33c64'}}>{text}</span>
    }, {
        title: '注册时间',
        width: 200,
        dataIndex: 'add_time',
        key: 'add_time',
        render: renderTime,
    }, {
        title: '用户最后一次更新时间',
        width: 200,
        dataIndex: 'update_time',
        key: 'update_time',
        render: renderTime,
    }, {
        title: '系统最后一次更新时间',
        width: 200,
        dataIndex: 'system_update_time',
        key: 'system_update_time',
        render: renderTime,
    }, {
        title: '操作',
        width: 150,
        fixed: 'right',
        key: 'action',
        render: (text: string, record: any) => (
            <a href="javascript:;" onClick={() => this.props.onSelectUser(record)}>选择用户</a>
        ),
    }];

    public render(): any {
        const {onPageChange, datas, pager} = this.props;

        return (
            <Table
                rowKey="id"
                bordered={true}
                dataSource={datas}
                columns={this.columns}
                pagination={pager}
                scroll={{
                    x: this.columns.reduce((total: number, val: any): number => {
                        return total + val.width;
                    }, 0)
                }}
                onChange={onPageChange}
            />
        )
    }
}

export default withWrapper(Form.create()(WrapperTable));